﻿@model CommerceOne.Models.ProductViewModel
@{
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "tabledata",
        LoadingElementId = "loading",
        LoadingElementDuration = 2000,
        OnSuccess = "OnSuccess",
        OnComplete = "OnComplete",
        OnFailure = "OnFailure",
        OnBegin = "OnBegin"
    };
}

<div class="art-content-layout">
    <div class="art-content-layout-row">
        <div class="art-layout-cell art-sidebar1">
            @Html.Partial("_LeftCategoryNav", @Model.LeftCategoryNavViewModel)
            @Html.Partial("_LeftBrandNav", @Model.LeftBrandNavViewModel)

            <div class="art-block">
                <div class="art-block-body">
                    <div class="art-blockcontent">
                        <div class="art-blockcontent-body">
                            <div>
                                <input type="text" value="" name="email" id="s" style="width: 95%;" />
                                <input type="button" name="search" class="art-button" value="Subscribe" />
                            </div>
                            <div class="cleared">
                            </div>
                        </div>
                    </div>
                    <div class="cleared">
                    </div>
                </div>
            </div>
            <div class="cleared">
            </div>
        </div>

        <div class="art-layout-cell art-content">
                            <div class="art-post">
                                <div class="art-post-body">
                                    <div class="art-post-inner art-article">
                                        <h2 class="art-postheader">
                                            @Model.Product.Name
                                        </h2>
                                        <div class="art-postcontent">
                                            <img src="@Model.Product.ProductImage" alt="an image" style="float: left; width: 320px;" />
                                            <p>
                                                <ul>
                                                    <li>@Model.Product.Code</li>
                                                    <li>@Model.Product.WarrantyMonth</li>
                                                    <li>@Model.Product.ShippingDescription</li>
                                                    <li>@Model.Product.Bonus</li>
                                                    <li>@Model.Product.Rating</li>
                                                    <li>@Model.Product.Price1</li>
                                                    <li> <input type="text"  value="1" style="width: 100px;/>
                                                    <span class="art-button-wrapper"><span class="art-button-l"></span><span class="art-button-r">
                                                    </span><a class="art-button" href="javascript:void(0)">Add to cart</a> </span></li>
                                                </ul>
                                                    @Model.Product.Description
                                                    <span class="art-button-wrapper"><span class="art-button-l"></span><span class="art-button-r">
                                                    </span><a class="art-button" href="javascript:void(0)">Read more...</a> </span>
                                                </p>
                                            <div class="cleared"></div>
                                            <div>
                                                <ul class="tabs">
                                                    <li><a href="#tab1">Gallery</a></li>
                                                    <li><a href="#tab2">Submit</a></li>
                                                </ul>
                                                <div class="tab_container">
                                                    <div id="tab1" class="tab_content">
                                                        <!--Content-->
                                                        @Model.Product.Description
                                                    </div>
                                                    <div id="tab2" class="tab_content">
                                                        @Model.Product.TechnicalProperty
                                                        <!--Content-->
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <div id="loading" style="display:none; color:Red; font-weight: bold"> <p>Loading Data...</p></div> 
                                                @using (Ajax.BeginForm("Detail", "Product", ajaxOpts))
                                                { 
                                                    <input type="hidden" id="productId" value="@Model.Product.Id" />
                                                    <textarea name="contents" id="contents" style="width: 400px; height: 40px;"></textarea>
                                                    <input type="submit" value="Comment" />
                                                }
                                            </div>
                                            <div id="tabledata">
                                                @Html.Partial("_Comments", @Model.ProductComment)
                                            </div>
                                        </div>
                                        <div class="cleared">
                                        </div>
                                    </div>
                                    <div class="cleared">
                                    </div>
                                </div>
                            </div>
                            <div class="cleared">
                            </div>
                        </div>
    </div>
</div>

    <script>


        $(document).ready(function () {

            //When page loads...
            $(".tab_content").hide(); //Hide all content
            $("ul.tabs li:first").addClass("active").show(); //Activate first tab
            $(".tab_content:first").show(); //Show first tab content

            //On Click Event
            $("ul.tabs li").click(function () {

                $("ul.tabs li").removeClass("active"); //Remove any "active" class
                $(this).addClass("active"); //Add "active" class to selected tab
                $(".tab_content").hide(); //Hide all tab content

                var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
                $(activeTab).fadeIn(); //Fade in the active ID content
                return false;
            });
        });


        function OnSuccess(data) {
            //            var target = $('#tabledata');
            //            target.empty();
            //            for (var i = 0; i < data.Page.length; i++) {
            //                target.append('<tr><td>' + data.Page[i].ClientName + '</td><td>' + data.Page[i].Date + '</td></tr>');
            //            }
            alert(data);
        }

        function OnFailure(request, error) {
            alert("This is the OnFailure Callback:" + error);
        }

        function OnComplete(request, status) {
            alert("This is the OnComplete Callback: " + status);
        }

        function OnBegin() {
            alert("This is the OnBegin Callback");
        }
    </script>
